<template>
  <div class="positive-reviews-component">
    <div class="positive-reviews-title">Reviews by subcategory</div>
    <ul class="positive-reviews-list">
      <li v-for="(review, index) in currentMatchedSubCategories" :key="index">
        <div class="review-item">
          <div class="review-name">{{ review.title }}</div>
          <div class="review-score">
            <span class="positive-count">{{ review.positive }}</span>
            <span class="divider"> / </span>
            <span class="total-count">{{ review.total }}</span>
            <span class="percentage">
              ({{ calculatePercentage(review) }}%)</span
            >
          </div>
        </div>
        <el-progress
          :percentage="calculatePercentage(review)"
          :show-text="false"
        ></el-progress>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseWidth: 200, // 基准宽度（px）
    };
  },
  props: {
    positiveReviews: {
      type: Array,
      required: true,
      validator: (list) =>
        list.every(
          (item) =>
            typeof item.name === "string" && typeof item.score === "number"
        ),
    },
    currentMatchedSubCategories: {
      type: Array,
    },
  },
  methods: {
    calculatePercentage(review) {
      if (!review.total || review.total === 0) return 0;
      return Math.round((review.positive / review.total) * 100);
    },
    getProgressWidth(max) {
      return max === 100 ? "{{ review.total}}%" : `${max}%`;
    },
  },
  computed: {
    totalReviews() {
      return this.positiveReviews.length;
    },
  },
  mounted() {
    console.log("当前分类的评价数据:", this.positiveReviews);
    console.log(
      "接收到子组件传来的进度条的数据",
      this.currentMatchedSubCategories
    );
  },
};
</script>

<style scoped lang="scss">
.positive-reviews-component {
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 16px;
  padding: 24px;
  flex: 1; /* 继承父容器的平分比例 */
  min-width: 0; /* 防止内容溢出 */
  width: 100%; /* 占满分配的 flex 空间 */

  .positive-reviews-title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;

    span {
      font-size: 16px;
      font-weight: 400;
    }
  }

  .positive-reviews-list {
    padding: 0;
    margin: 0 0 16px 0;

    li {
      list-style: none;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .review-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;

        .review-name {
          font-weight: 500;
          color: #333;
        }

        .review-score {
          color: #666;
          font-size: 14px;
          white-space: nowrap;
          .total-count {
            font-weight: 700; /* 只加粗total数字 */
          }
        }
      }
    }
  }

  :deep(.el-progress) {
    .el-progress-bar__outer {
      height: 6px;
      border-radius: 3px;
      background-color: #f0f0f0;
    }

    .el-progress-bar__inner {
      background-color: #5aca54 !important;
      border-radius: 3px;
    }
  }
}
</style>
